<template>

  <view>
    <!-- 自定义导航栏 -->

    <HeadNav></HeadNav>

    <!-- 自定义导航栏结束 -->
    <!-- 搜索区域 -->
    <view class="search-box">
      <uni-search-bar @confirm="inputSearch" v-model="searchValue" class="search_class"></uni-search-bar>
      <uni-icons type="cart-filled" size="28" color="#D5DDE5" @click="goShoppingCar"></uni-icons>
    </view>
    <!-- 轮播图的区域 -->
    <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goodsId=' + item.id">
          <img :src="imgPrefixAddress + item.site">
        </navigator>
      </swiper-item>
    </swiper>
    <!--    <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item class="swiper-item">
        <img src="@/static/home/lunbo.png">
      </swiper-item>
      <swiper-item class="swiper-item">
        <img src="@/static/home/lunbo.png">
      </swiper-item>
    </swiper> -->
    <!-- 主体内容区域 -->
    <view class="exquisite">
      <view class="titie">
        <view class="img">
          <!-- <image class="logo" src="@/static/home/Exquisitepiece.png" mode="aspectFit"></image> -->
          <image class="logo" src="@/static/home/Exquisitepiece.svg"></image>
        </view>
        <view class="font">般嘉家居</view>
      </view>
      <view class="content">
        <navigator class="content-wrap" v-for="(item,i) in exquisite" :key="i"
          :style="{ backgroundImage: `url(${imgPrefixAddress}${item.varietyContext})` }"
          :url="'/subpkg/search/search?varietyId=' + item.varietyId">
          <view class="titie">
            {{item.varietyName}}
          </view>
          <view class="icon">
            <img :src="imgPrefixAddress + item.varietyIcon">
          </view>
        </navigator>
      </view>
    </view>
    <!-- 精致软装板块 -->
    <view class="aestheticism">
      <view class="titie-bt">
        <view class="img">
          <image src="@/static/home/Aestheticism.svg"></image>
        </view>
        <view class="font">精致软装</view>
      </view>
      <view class="content">
        <van-tabs :active="active" line-width="30px" animated="true" title-inactive-color="#B8C1CC"
          title-active-color="#141414" color="#841616" nav-class="van-tabs">
          <van-tab :title="item.varietysName" v-for="(item,i) in softDecoration" :key="i">
            <navigator class="img" :url="'/subpkg/goods_detail/goods_detail?goodsId='+ item.min.goodsId">
              <image :src="imgPrefixAddress + item.min.goodsPreviews.split(',')[0] "></image>
              <view class="content-text">
                <view class="content-text-title">
                  <text>{{item.min.goodsName}}</text>
                </view>
                <view class="content-text-price">
                  ¥{{item.min.retail_value}}.00
                </view>
              </view>
            </navigator>
            <!-- 横向滚动区域 -->
            <view class="scroll-first">
              <scroll-view scroll-x="true" class="scroll" scroll-left="120">
                <navigator class="a" v-for="(item,index) in item.commodity" :key="index"
                  :url="'/subpkg/goods_detail/goods_detail?goodsId='+item.goodsId">
                  <image :src="imgPrefixAddress + item.goodsPreviews.split(',')[0]" mode=" aspectFill"></image>
                  <view class="content-text">
                    <view class="content-text-title">
                      <text>{{item.goodsName}}</text>
                    </view>
                    <view class="content-text-price">
                      ¥{{item.retail_value}}.00
                    </view>
                  </view>
                </navigator>
              </scroll-view>
            </view>
            <!-- 横向滚动区域结束 -->
          </van-tab>
        </van-tabs>

      </view>
    </view>
    <!-- 精致软装板块结束 -->
    <!-- 风格模块 -->
    <view class="Modern-style" v-for="(item,index) in styleList" :key="item.styleId">
      <view class="titie">
        <view class="img">
          <image src="https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com/applet/daohang.png" mode="aspectFit"></image>
        </view>
        <view>{{item.styleName}}</view>
      </view>
      <!-- 内容区 -->
      <navigator class="banner" :url="'/subpkg/goods_detail/goods_detail?goodsId=' + item.min.goodsId">
        <view class="img">
          <image :src="imgPrefixAddress + item.min.goodsPreviews"></image>
        </view>
        <view class="content-text">
          <view class="content-text-title">
            <text>{{item.min.goodsName}}</text>
          </view>
          <view class="content-text-price">
            ¥{{item.min.retailValue}}.00
          </view>
        </view>
      </navigator>
      <!-- 四拼图区 -->
      <view class="four-imgs">
        <navigator class="little-pic" v-for="(items,i) in item.goodsList" :key="items.goodsId"
          :url="'/subpkg/goods_detail/goods_detail?goodsId=' + items.goodsId">
          <image :src="imgPrefixAddress + items.goodsPreviews.split(',')[0]"></image>
          <view class="wenzi">
            <text>{{items.goodsName}}</text>
            <span>¥{{items.retailValue}}</span>
          </view>
        </navigator>

      </view>
    </view>
    <!-- 最底部产品介绍页 -->
    <view class="titie-ow">
      <view class="img">
        <image src="https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com/applet/daohang.png"></image>
      </view>
      <view>热门推荐</view>
    </view>
    <view class="little-content">
      <navigator class="little-pic" v-for="(item,i) in randomList" :key="item.goodsId"
        :url="'/subpkg/goods_detail/goods_detail?goodsId=' + item.goodsId">
        <image :src="imgPrefixAddress + item.pic" mode=" widthFix"></image>
        <view class="wenzi">
          <text>{{item.goodsName}}</text>
          <span>¥{{item.retailValue}}</span>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索关键词
        searchValue: '',
        swiperList: [],
        //图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        //tab 激活项
        active: 0,
        //般嘉家居板块
        exquisite: [],
        // 精致软装板块
        softDecoration: [],
        // 所有风格分类数据
        styleList: [],
        // 首页最下面数据
        randomList: []
      };
    },
    //页面一加载就调用获取轮播图数据
    onLoad() {
      this.getSwiperList()
      this.getStymodule()
      this.getExquisite()
      this.getStyleList()
      this.getRandomList()
    },
    methods: {
      // 首页搜索事件
      inputSearch(e) {
        uni.navigateTo({
          url: `/subpkg/search/search?goodsName=${e.value}`
        })
      },
      // 首页点击购物车事件
      goShoppingCar() {
        if (uni.getStorageSync('token') == '') return uni.$showMsg('未登录，请登录')
        uni.redirectTo({
          url: '/subpkg/buyCar/buyCar'
        })
      },
      // 一级列表跳转事件
      goSearch(i) {
        uni.navigateTo({
          url: `/subpkg/search/search?varietyId=${i.varietyId}`
        })
      },
      // 搜索框事件
      onSearch(e) {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      // 获取轮播图的请求
      async getSwiperList() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/main/query/carousel')
        //如果请求失败
        if (res.code !== 200) return uni.$showMsg()
        this.swiperList = res.data
      },
      //查询一级分类/背景/图标
      async getStymodule() {
        const {
          data: res
        } = await uni.$http.get('/main/query/stairclassify')
        //如果请求失败
        if (res.code !== 200) return uni.$showMsg()
        this.exquisite = res.data
      },
      // 获取精致软装板块
      async getExquisite() {
        const {
          data: res
        } = await uni.$http.get('/main/query/delicate')
        if (res.code !== 200) return uni.$showMsg()
        this.softDecoration = res.data.categorys

      },
      // 获取所有分类
      async getStyleList() {
        const {
          data: res
        } = await uni.$http.get('/main/query/stymodule')
        if (res.code !== 200) return uni.$showMsg()
        res.data.styleList.forEach(item => {
          item.min.goodsPreviews = this.interceptBigImg(item.min.goodsPreviews)
          // item.min.goodsPreviews = this.interceptBigImg(item.min.goodsPreviews)
        })
        this.styleList = res.data.styleList
      },
      // 处理后端返回的数据 //大图
      interceptBigImg(str) {
        let newStr = ''
        if (str.length < 45) return str
        newStr = str.split(',')[0]
        return newStr
      },
      // 首页 最下面 下拉（分页）获取商品信息
      async getRandomList() {
        const {
          data: res
        } = await uni.$http.get('/main/query/random')
        //如果请求失败
        if (res.code !== 200) return uni.$showMsg()
        res.rows.forEach(item => {
          item.pic = ''
          if (item.goodsPreviews.length > 43) {
            item.pic = item.goodsPreviews.split(',')[0]
          } else {
            item.pic = item.goodsPreviews
          }
        })
        this.randomList = res.rows
      }
    },
    components: {}
  }
</script>

<style lang="scss">
  .nav {
    padding-top: 50rpx;
    padding-left: 50rpx;
    font-size: 40rpx;
    font-weight: bolder;
  }

  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  // 般嘉家具
  .exquisite {
    padding: 0 20rpx 0 20rpx;

    .titie {
      .img {
        width: 200rpx;
        height: 82rpx;

        image {
          width: 100%;
          height: 100%;
        }


      }

      .font {
        font-size: 14px;
      }
    }

    .content {
      // background-color: aqua;
      // height: 1000rpx;

      .content-wrap {
        // background-color: #c00000;
        display: flex;
        justify-content: left;
        align-items: center;
        height: 200rpx;
        margin-bottom: 20rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .titie {
          margin-left: 60rpx;
          color: white;
        }

        .icon {
          margin-left: 120rpx;
          width: 30px;
          height: 30px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // 精致软装
  .aestheticism {
    // padding: 0 20rpx 0 20rpx;

    .titie-bt {
      padding: 0 20rpx 0 20rpx;

      .font {
        font-size: 14px;
      }

      .img {
        width: 200rpx;
        height: 82rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .content {
      .van-tabs {
        background-color: rgb(255, 255, 255, ); //255,255,255
      }


      .img {
        width: 100%;
        height: 202px;
        margin-bottom: 20rpx;
        position: relative;

        .content-text {
          position: absolute;
          bottom: 10rpx;

          .content-text-title {
            font-size: 12px;
            color: #000000;
            margin-left: 23rpx;
          }

          .content-text-price {
            color: #000000;
            font-size: 18px;
            margin-left: 23rpx;
          }
        }

        image {
          width: 100%;
          height: 100%;
        }
      }

      // 横向滚动区域
      .scroll-first {
        padding: 0 20rpx;
        height: 196px;

        .scroll {
          width: 100%;
          // background-color: pink;
          white-space: nowrap;
          // padding: 0 20rpx 0 20rpx;

          .a {
            width: 130px;
            height: 130px;
            display: inline-block;
            margin-right: 10rpx;

            image {
              width: 100%;
              height: 100%;
            }

            .content-text {

              .content-text-title {
                font-size: 11px;
                color: #66737F;
              }

              .content-text-price {
                color: #141414;
                font-size: 18px;
              }
            }


          }



        }
      }
    }

    .titie {
      .img {
        width: 120rpx;
        height: 110rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 现代风格模块
  .Modern-style {
    padding: 0 20rpx 0 20rpx;

    .titie {
      font-size: 14px;

      .img {
        width: 200rpx;
        height: 82rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    //内容区


    .banner {
      width: 100%;
      height: 202px;
      font-size: 20rpx;
      position: relative;


      .img {
        width: 100%;
        height: 100%;
      }

      .content-text {
        position: absolute;
        bottom: 10rpx;
        font-size: 12px;
        color: #000000;
        margin-left: 23rpx;
      }
    }

    // 四拼图区
    .four-imgs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 25rpx;

      .little-pic {
        width: 160px;
        height: 140px;


        image {
          width: 100%;
          height: 60%;
        }

        .wenzi {
          display: flex;
          flex-direction: column;

          text {
            color: #66737F;
            font-size: 11px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          span {
            color: #141414;
            font-size: 18px;
          }

        }
      }
    }

    .four-imgs::after {
      content: '';
      width: 160px;
      // height: 140px;
      visibility: hidden;
    }

    .img {
      width: 100%;
      height: 202px;
      margin-bottom: 20rpx;
      position: relative;

      .content-text {
        position: absolute;
        bottom: 10rpx;

        .content-text-title {
          font-size: 12px;
          color: #FFFFFF;
          margin-left: 23rpx;
        }

        .content-text-price {
          color: #FFFFFF;
          font-size: 18px;
          margin-left: 23rpx;
        }
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }



  // 底部产品内容区

  .titie-ow {
    padding: 0 20rpx;

    .img {
      width: 200rpx;
      height: 82rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .little-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 14rpx;


    .little-pic {
      width: 160px;
      height: 140px;


      image {
        width: 100%;
        height: 60%;
      }

      .wenzi {
        display: flex;
        flex-direction: column;

        text {
          color: #66737F;
          font-size: 11px;
        }

        span {
          color: #141414;
          font-size: 18px;
        }

      }
    }
  }

  .little-content::after {
    content: '';
    width: 160px;
    height: 140px;
    visibility: hidden;
  }

  // 自定义搜索模块
  .search-box {
    width: 100%;
    display: flex;
    align-items: center;

    .search_class {
      width: 330px;
    }
  }
</style>